<template>
  <div class="VCCode">
    <el-dialog title="提示" :visible.sync="isShow" width="40%" center>
      <p class="tip">
        &emsp;&emsp;为了您的账号安全，系统希望是您本人在操作，请先验证手机号 。
      </p>
      <div class="code">
        <el-form :model="codeForm" :rules="codeFormRules" ref="codeFormRef" class="code_form">
          <el-form-item prop="phone">
            <el-input placeholder="手机号" v-model="codeForm.phone" :disabled="true">
              <div slot="prefix" class="phone_icon"></div>
            </el-input>
            <el-button
              class="code_btns"
              type="text"
              @click="sendCode()"
              :disabled="btnIsDisabled"
            >{{VCodeText}}</el-button>
          </el-form-item>
          <el-form-item prop="code">
            <!-- <el-input placeholder="验证码" v-model="codeForm.code" class="code_input" @keyup.enter.native="codeLogin('codeFormRef')">
                  <div slot="prefix" class="code_icon"></div>
            </el-input>-->
            <sixCaptchaInput
              ref="sixCaptchaInput"
              :code.sync="codeForm.code"
              @updateCode="updateCode"
            />
          </el-form-item>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import sixCaptchaInput from "~/components/sixCaptcha-input";
export default {
  components: {
    sixCaptchaInput
  },
  data() {
    var validatePhone = function(rule, value, callback) {
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else if (!/^1[3456789]\d{9}$/.test(value)) {
        callback(new Error("请输正确的手机号"));
      } else {
        callback();
      }
    };
    return {
      isShow: false,
      codeForm: {
        phone: "",
        code: ""
      },
      VCodeText: "发送验证码",
      btnIsDisabled: false,
      codeFormRules: {
        phone: [{ validator: validatePhone, trigger: "blur" }],
        code: [{ message: "请输入验证码", trigger: "blur" }]
      },
      phone: ''
    };
  },
  methods: {
    show(phone) {
      let reg = /([0-9]{3})([0-9]{5})([0-9]{3})/
      this.phone = phone
      this.codeForm.phone = phone.replace(reg,"$1*****$3")
      this.isShow = true;
    },
    cancel() {
      this.isShow = false;
      this.codeForm.phone = "";
    },
    confirm() {
      if (this.codeForm.code != "" && this.codeForm.code.length == 6) {
        this.vcSumbmit();
      } else {
        this.$alert('请输入正确的验证码', "提示", {
          confirmButtonText: "确定",
          callback: action => {}
        });
      }
    },
    vcSumbmit() {
      let params = {
        phone: this.phone,
        code: this.codeForm.code
      };
      this.$axios
        .get("api/consumer/verifyPhone", { params: params })
        .then(res => {
          if (res.data.code == 200) {
            this.$emit("confirm");
            this.cancel();
          } else {
            this.$alert(res.data.message, "提示", {
              confirmButtonText: "确定",
              callback: action => {}
            });
          }
        });
    },
    updateCode(val) {
      this.codeForm.code = val;
    },
    sendCode() {
      let params = {
        phone: this.phone,
        type: 3
      };
      let that = this;
      this.$axios.post("api/captcha", params).then(res => {
        if (res.data.code == 200) {
          that.$message({
            message: "验证码发送成功！",
            type: "success"
          });
          let num = 60;
          that.btnIsDisabled = true;
          let timer = setInterval(function() {
            that.VCodeText = num + "秒后可重新发送";
            num -= 1;
            if (num < 0) {
              that.VCodeText = "发送验证码";
              that.btnIsDisabled = false;
              clearInterval(timer);
            }
          }, 1000);
        } else {
          if (res.data.code == 400) {
            that.$message({
              message: res.data.message,
              type: "error"
            });
          } else {
            that.$message({
              message: "验证码发送失败！",
              type: "error"
            });
          }
        }
      });
    }
  }
};
</script>

<style lang='less' scoped>
.VCCode {
  /deep/.el-form {
    width: 390px;
    margin: 25px auto 10px;

    .el-form-item {
      margin-bottom: 30px;
      position: relative;
    }
    .el-input {
      .el-input__inner {
        padding-left: 58px;
      }
      .el-input__prefix {
        left: 20px;
      }
    }
  }
  .tip {
    color: #666;
    font-size: 14px;
    width: 390px;
    margin: 10px auto 10px;
    span {
      color: #000;
    }
  }
  .code {
    .code_form {
      .el-form-item:last-child {
        margin-bottom: 10px;
        .el-form-item__error {
          padding-top: 1px;
        }
      }

      .code_btns {
        position: absolute;
        right: 18px;
        bottom: 0px;
      }
      .phone_icon {
        width: 16px;
        height: 26px;
        background: url("../assets/img/图标.png") no-repeat;
        background-position: -371px -419px;
        margin-top: 6px;
      }
      .code_icon {
        width: 27px;
        height: 17px;
        background: url("../assets/img/图标.png") no-repeat;
        background-position: -399px -398px;
        margin-top: 10px;
      }
    }
  }
}
</style>